<template>
    <el-dialog :model-value="localDialogVisible" :title="localTitle" :before-close="localCancelDialog" width="30%">
        <div v-loading="loading">
            <el-checkbox-group v-if="packageList && packageList.length > 0" v-model="packageCheckList">
                <el-checkbox v-for="packageInfo in packageList" :label="packageInfo.packageid" :key="packageInfo.packageid">{{packageInfo.name}}</el-checkbox>
            </el-checkbox-group>
            <template v-else-if="packageList.length == 0 && !loading">
                <div>暂无可关联的内容包，请先添加内容包再进行关联</div>
                <el-button style="margin-top:20px" @click="handlePackageList">点击跳转内容包列表进行添加</el-button>
            </template>
        </div>
        <template #footer>
            <div v-if="packageList && packageList.length > 0" align="center">
                <el-button type="primary" size="small" @click="handleMediaRelPackage">确定</el-button>
                <el-button type="primary" size="small" @click="localCancelDialog">取消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {useStore} from 'vuex'
    import { useRouter } from 'vue-router';
    import { ref, toRef } from 'vue'
    import {getPackages} from '@/api/package/package'
    import {mediasRelPackages} from '@/api/media/media'
    import {ElMessage} from 'element-plus'
    export default {
        name: "",
        components: {},
        props: {
            title:{
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            toDialogData: {
                type: Object,
                required: true
            }
        },
        emits: ['cancelDialog','getData'],
            setup(props, context) {
            const store = useStore()
            const router = useRouter()
            const corpid = store.getters.corpinfo.corpid
            const subid = store.getters.subinfo.subid


            const localTitle = toRef(props, 'title')
            const localDialogVisible = toRef(props, 'visible')
            const localDialogData = toRef(props, 'toDialogData')
            const localCancelDialog = () => {
                context.emit('cancelDialog')
            }
            const loading = ref(true)

            const packageCheckList = ref([])
            if( localDialogData.value.packageids != undefined ){
                Object.assign(packageCheckList.value,localDialogData.value.packageids)
            }

            const packageList = ref([])
            getPackages({'corpid':corpid,'subid':subid}).then(response => {
                loading.value = false
                if( response.errcode == 0 && response.data.list.length > 0 ){
                    packageList.value = response.data.list
                }else{
                    console.log(response)
                }
            })

            const handleMediaRelPackage = () => {
                if( packageCheckList.value.length <= 0 ){
                    ElMessage({type: 'warning', message: '请选择关联内容包', duration: 2000})
                    return
                }

                if( localDialogData.value.mediaids.length <= 0 ){
                    ElMessage({type: 'warning', message: '媒资ID为空', duration: 2000})
                    return
                }
                let query = {
                    mediaids:localDialogData.value.mediaids,
                    packageids:packageCheckList.value
                }
                mediasRelPackages( query ).then(response => {
                    if( response.errcode == 0 ){
                        ElMessage({type: 'success', message: '关联成功', duration: 2000})
                        setTimeout(function() {
                            context.emit('cancelDialog')
                            context.emit('getData')
                        }, 2000)
                    }else{
                        console.log(response)
                    }
                })
            }
            const handlePackageList = () => {
                router.push({path: '/package'})
            }
            return {
                loading,
                localTitle,
                localDialogVisible,
                localCancelDialog,
                packageList,
                packageCheckList,
                handleMediaRelPackage,
                handlePackageList
            }
        }
    }
</script>

<style scoped  lang="scss">

</style>